<template>
	<div class="spike">
		<div class="spike-card" v-if="productData.products && productData.products.length>0">
			<div class="spike-card-top">
				<h2 class="spike-card-top-title">
					<!-- #ifdef MP-WEIXIN -->
					<image class="title-img"
						:src="`${VUE_APP_STATIC_URL}static/canvas-images/spike/img-title.png?v1.0.4`" alt="秒杀专区"
						mode="widthFix" />
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS -->
					<image class="title-img"
						:src="`${VUE_APP_STATIC_URL}static/canvas-images/spike/img-title.png?v1.0.4`" alt="秒杀专区"
						mode="widthFix" />
					<!-- #endif -->
				</h2>
				<div class="spike-card-top-time-title" v-if="state===2">
					活动已结束
				</div>
				<div class="spike-card-top-time flex-row-plus" v-if="state !==2 && count.length">
					<label class="spike-card-top-time-title">距离{{count[0]}}</label>
					<label class="spike-card-top-time-span">
						{{state===2?'还有 ':'仅剩  '}} {{count[1]}}:{{count[2]}}:{{count[3]}}
					</label>
				</div>
				<a class="btn-more" @click="jumpSeckills(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
			</div>
			<div class="spike-card-list">
				<div class="spike-card-item" v-for='item in productData.products.slice(0,2)' :key='item.productId'
					@click="jumpProductDetail(item)">
					<div class="spike-card-item-img" >
						<image :src="item.image" alt="" />
						<lable class="reward-price" v-if="item.rewardContribute>0">
							贡献值 {{ item.rewardContribute|0}}</lable>
					</div>
					<div class="spike-card-item-info">
						<h3 class="name">
							{{item.productName}}
						</h3>
						<div class="price-warp">
							<div class="price">
								¥ {{item.price}}
							</div>
							<!-- 	<div class="original-price">
								¥ {{item.originalPrice}}
							</div> -->
						</div>
						<div class="stock">
							仅剩{{item.stockNumber}}件
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import commonMixin from '../mixin'
	import {
		toRefs
	} from 'vue';
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const props = defineProps({
		typeId: {
			type: Number,
			default: 1,
		},
		shopId: {
			type: Number,
			default: 0,
		},
		componentContent: {
			type: Object,
			default () {
				return {};
			}
		}
	})
	const {
		typeId,
		shopId,
		componentContent
	} = toRefs(props)
	const {
		state,
		productData,
		count,
		jumpProductDetail,
		jumpSeckills
	} = commonMixin(componentContent, typeId, shopId)
</script>

<style lang="scss" scoped>
	.spike {
		background: #F8F8F8;
		padding: 30rpx;

		&-card {
			height: 230rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			&-top {
				position: relative;
				padding: 32rpx 0 22rpx;
				display: flex;
				align-items: center;

				&-title {
					.title-img {
						width: 144rpx;
						display: block;
					}
				}

				&-time {
					opacity: 1;
					border-radius: 26rpx;
					border: 2rpx solid $mainColor;
					vertical-align: middle;
					font-size: 18rpx;
					font-weight: 600;
					text-align: center;

					&-title {
						padding: 8rpx 16rpx;
						background-color: $mainColor;
						opacity: 1;
						border-radius: 26rpx;
						color: #fff;
						vertical-align: middle;
						text-align: center;
					}

					&-span {
						display: inline;
						padding: 8rpx 16rpx;
						vertical-align: middle;
						color: $mainColor;
					}
				}

				.btn-more {
					position: absolute;
					right: 8rpx;
					top: 40rpx;
					line-height: 33rpx;
					padding-right: 25rpx;
					font-size: 24rpx;
					color: #333;

					.iconfont {
						content: '';
						font-size: 26rpx;
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}

			&-list {}

			&-item {
				width: 50%;
				border-top: 1px solid #F3F4F5;
				border-left: 1px solid #F3F4F5;
				float: left;
				align-items: center;
				box-sizing: border-box;

				&:nth-child(2n+1) {
					border-left: 0px;
				}

				&-img {
					width: 156rpx;
					height: 144rpx;
					margin-right: 10rpx;
					float: left;
					display: block;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
						object-fit: contain;
					}
					.reward-price {
						padding: 4rpx 10rpx;
						font-weight: 600;
						color: #fff;
						font-size: 18rpx;
						background: #F3651F;
						border-radius:18rpx 18rpx 18rpx 0;
						z-index: 99;
						position: absolute;
						top: 0;
						left: 0;
					}
				}

				&-info {
					height: 100%;
					margin-left: 172rpx;
					width: 168rpx;

					.name {
						font-size: 28rpx;
						font-weight: 600;
						color: #000A14;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.stock {
						padding: 4rpx 12rpx;
						margin-top: 12rpx;
						border: 2rpx solid $mainColor;
						border-radius: 28rpx;
						font-weight: 600;
						display: inline-block;
						font-size: 18rpx;
						color: $mainColor;
					}

					.price {
						font-size: 28rpx;
						font-weight: 600;
						margin-top: 4rpx;
						color: #000;
						padding-right: 10rpx;
						display: inline-block;
					}

					.original-price {
						font-size: 20rpx;
						line-height: 28rpx;
						color: #CCCCCC;
						display: inline-block;
					}
				}
			}
		}
	}
</style>